import { Spin } from "antd";
import React, { Suspense } from "react";
import { RouteObject } from "../types";

/**
 * 组件懒加载方案 https://zh-hans.reactjs.org/docs/react-api.html#reactsuspense
 * @param Comp
 * @returns
 */
export const lazyload = (
  Comp: React.LazyExoticComponent<any>
): React.ReactNode => {
  return (
    <Suspense
      fallback={
        <Spin
          size="large"
          style={{
            display: "flex",
            alignItems: "center",
            justifyContent: "center",
            height: "100%",
          }}
        />
      }
    >
      <Comp></Comp>
    </Suspense>
  );
};

/**
 * 处理源路由为素路由，不引用element元素
 * @param routes
 * @returns
 */
export const toPlainRoutes = (
  routes: Array<RouteObject>
): Array<RouteObject> => {
  return routes.map((route) => {
    const $route = { ...route };
    delete $route.element;
    if ($route.children && $route.children.length)
      $route.children = toPlainRoutes($route.children);
    return $route;
  });
};
